<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="订单信息" name="ProDetail"></el-tab-pane>
      <el-tab-pane label="物流信息" name="Delivery"></el-tab-pane>
    </el-tabs>
    <component :is="activeName" :detail="detail" :visible="visible"></component>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import ProDetail from "./dialog/ProDetail.vue";
import Delivery from "./dialog/Delivery.vue";

@Component({
  components: {
    ProDetail,
    Delivery,
  },
})
export default class ProductDetail extends Vue {
  @Prop({
    type: Object,
    default() {
      return {};
    },
  })
  detail: any;

  @Prop({
    type: Boolean,
    default() {
      return false;
    },
  })
  visible: any;

  @Watch("visible")
  indexDetail() {
    this.activeName = "ProDetail";
  }

  /** 弹窗标签 */
  activeName = "ProDetail";

  handleClick(tab) {
    this.activeName = tab.name;
  }
}
</script>

<style lang="scss" scoped></style>
